nextjs v16新特性

1. Turbopack 终于正式成为默认 Bundler

以前：

next dev

底层：

xxxxxxxxxx
Webpack

现在：

xxxxxxxxxx
Turbopack (Stable)

默认启用。构建和热更新速度显著提升。(Casibom Haber)

面试一句话：

Next.js 16 makes Turbopack the default stable bundler, replacing Webpack as the primary build system.

2. 最大变化：Caching 模型彻底改变

这是我认为最值得学的。

Next.js 15 之前

很多缓存是隐式的：

xxxxxxxxxx
await fetch(url)

开发者经常搞不清：

xxxxxxxxxx
这个会缓存吗？
这个会 ISR 吗？
什么时候重新验证？

Next.js 16

变成：

xxxxxxxxxx
"use cache";

显式缓存。

例如：

​x
export async function getPosts() {
  "use cache";
​
  return db.post.findMany();
}

缓存行为由开发者明确声明。(CodeForGeek)

面试官很可能问：

Why was "use cache" introduced?

答案：

To make caching explicit and predictable instead of relying on implicit framework behavior.

3. PPR（Partial Prerendering）基本落地

以前：

xxxxxxxxxx
SSR
SSG
ISR

三套体系。

现在：

xxxxxxxxxx
Cache Components
+
PPR

统一了很多思路。(Casibom Haber)

可以做到：

xxxxxxxxxx
页面外壳提前渲染
​
↓
​
动态部分后续流式返回

类似：

xxxxxxxxxx
Header
Sidebar
​
Loading...

然后：

xxxxxxxxxx
Posts
Comments
Profile

逐步流出来。

4. middleware.ts 开始退出历史舞台

以前：

xxxxxxxxxx
middleware.ts

现在推荐：

xxxxxxxxxx
proxy.ts

Next 团队认为：

middleware 这个名字让大家误以为是 Express Middleware。

实际上它更像：

xxxxxxxxxx
Network Boundary

所以改名了。(Casibom Haber)

这个面试里属于加分知识点。

5. React 19.2 深度集成

Next.js 16 默认搭配 React 19.2。(AlternativeTo)

意味着你可以直接使用：

• useEffectEvent
• View Transitions
• 最新 Server Components 能力

面试可能问：

Which React version is bundled with Next.js 16?

答案：

React 19.2.

6. React Compiler 支持成熟

以前：

xxxxxxxxxx
useMemo
useCallback
memo

写得到处都是。

现在：

xxxxxxxxxx
React Compiler

能够自动做很多记忆化优化。(InfoWorld)

所以未来面试很可能出现：

Do we still need useMemo everywhere?

答案：

Less than before. React Compiler can automatically optimize many cases.

7. Routing 继续优化

Next.js 16 对导航进行了进一步优化：

xxxxxxxxxx
Layout Deduplication
Incremental Prefetching

减少重复请求。

页面切换更快。(AlternativeTo)

Next.js

• Server Components
• Server Actions
• Streaming SSR
• Suspense
• Cache Components ("use cache")
• PPR
• Turbopack
• hydration 原理

react 19 新特性

新特性很多，但是只需要关注下面这些即可。

如果是面试，React 19 不需要把所有 API 都背下来，但有几个特性已经属于高频题了。

1. Actions（最大的变化）

React 19 最大的目标之一就是简化表单提交和异步状态管理。

以前：

xxxxxxxxxx
const [loading, setLoading] = useState(false);
​
async function handleSubmit() {
  setLoading(true);
​
  try {
    await saveData();
  } finally {
    setLoading(false);
  }
}

需要自己管理：

• loading
• error
• pending

React 19：

xxxxxxxxxx
const [error, submitAction, isPending] =
  useActionState(saveData, null);

React 自动管理提交状态。

中文

React 19 引入了 Actions，允许开发者直接把异步操作作为 Action 提交，React 会自动管理 pending、error 和更新流程。

English

React 19 introduced Actions, which simplify async mutations by letting React manage pending, error, and update states automatically.

2. useActionState

用于处理表单 Action 的状态。

xxxxxxxxxx
const [state, formAction] =
  useActionState(action, initialState);

以前：

xxxxxxxxxx
useState
useEffect
try/catch

一堆逻辑。

现在：

xxxxxxxxxx
useActionState

统一处理。

useActionState combines form submission and state management into a single Hook.

3. useFormStatus

获取当前表单提交状态。

xxxxxxxxxx
const { pending } = useFormStatus();

例如：

xxxxxxxxxx
<button disabled={pending}>
  Submit
</button>

以前：

xxxxxxxxxx
loading state
props drilling
context

现在直接从表单上下文获取。

useFormStatus allows components inside a form to access the current submission status without passing props.

4. useOptimistic

高频面试题。

实现 Optimistic UI。

例如发评论：

以前：

xxxxxxxxxx
点击发送
↓
等待接口
↓
成功后显示

用户感觉慢。

现在：

xxxxxxxxxx
const [comments, addOptimisticComment] =
  useOptimistic(initialComments);

点击发送：

xxxxxxxxxx
立即显示评论
↓
后台请求
↓
失败回滚

中文

useOptimistic 可以在服务器响应之前先更新 UI，提高用户体验。

English

useOptimistic lets the UI update immediately before the server confirms the change, providing a faster user experience.

5. use()

这是 React 19 最有技术含量的 API。

以前：

xxxxxxxxxx
useEffect(() => {
  fetchData();
}, []);

React 19：

xxxxxxxxxx
const data = use(fetchPromise);

React 可以：

xxxxxxxxxx
Promise Pending
↓
自动 Suspense
​
Promise Resolved
↓
继续渲染

中文

use() 可以直接读取 Promise 或 Context，如果 Promise 未完成，React 会自动挂起当前渲染并交给 Suspense 处理。

English

The use() API allows components to read Promises directly. If the Promise is still pending, React suspends rendering and lets Suspense handle the loading state.

6. Document Metadata

React 终于支持：

xxxxxxxxxx
<title />
<meta />
<link />

直接写在组件里。

例如：

xxxxxxxxxx
function Page() {
  return (
    <>
      <title>Home</title>
      <meta
        name="description"
        content="Homepage"
      />
    </>
  );
}

React 自动处理 Head。

7. Resource Loading APIs

React 可以协调：

xxxxxxxxxx
preload()
preinit()
preconnect()

例如：

xxxxxxxxxx
preload("/hero.jpg", {
  as: "image",
});

作用：

xxxxxxxxxx
更早加载资源
减少瀑布请求
提高性能

8. ref 作为普通 Prop

React 19 之前：

xxxxxxxxxx
forwardRef()

React 19：

xxxxxxxxxx
function MyInput({ ref }) {
  return <input ref={ref} />;
}

直接支持。

Is forwardRef still required in React 19?

回答：

In many cases, no. React 19 allows ref to be passed as a normal prop.

9. Hydration 错误提示增强

以前：

xxxxxxxxxx
Hydration failed

很难定位。

现在会告诉你：

xxxxxxxxxx
Server:
"Hello"
​
Client:
"Hello World"

定位速度快很多。

面试最值得掌握的 5 个

如果时间有限，优先掌握：

1. use()
2. useActionState()
3. useOptimistic()
4. useFormStatus()
5. ref as prop（减少 forwardRef）

一句话总结（面试版）

中文

React 19 主要围绕异步数据处理和表单操作进行了增强，引入了 use()、Actions、useActionState、useOptimistic 等 API，让 Suspense、Server Components 和表单交互变得更加简单。

English

React 19 focuses on improving async data handling and form interactions. New features such as use(), Actions, useActionState, and useOptimistic make Suspense, Server Components, and user interactions much easier to implement.